<template>
  <div class="home">
    <div style="margin-top: 5px; color: #606266; font-size: 15px">
      <span style="margin-right: 10px">档案名称:</span>
      <el-input
        v-model="archTitle"
        clearable
        placeholder="请输入检索的档案名称"
        style="width: 200px; margin-right: 20px"
        size="small"
      />
      借阅状态:
      <el-select
        v-model="appState"
        size="small"
        placeholder="请选择归档状态"
        style="margin: 0 10px"
      >
        <el-option
          v-for="item in stateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" size="small" @click="getData()">检索</el-button>
    </div>

    <el-table
      v-loading="isLoading"
      border
      max-height="650"
      :data="listData"
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column align="center" prop="archMainCode" label="档案编号" />
      <el-table-column
        align="center"
        prop="archTitle"
        label="档案名称"
        width="width"
      />
      <el-table-column
        align="center"
        prop="staffCode4App"
        label="借阅人"
        width="width"
      />
      <el-table-column align="center" prop="username4Approval" label="审批人" />
      <el-table-column align="center" prop="appState" label="状态">
        <template slot-scope="scope">
          <!-- {{ scope.row.appState | appState }} -->
          <span v-if="scope.row.appState === 0" class="warning">申请中</span>
          <span
            v-else-if="scope.row.appState === 5"
            class="success"
          >申请通过</span>
          <span v-else-if="scope.row.appState === 7" class="info">已过期</span>
          <span v-else class="danger">申请驳回</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="estBorrowDay"
        :formatter="dateFormat"
        label="借阅日期"
      />
      <el-table-column align="center" prop="during" label="借阅时长（天）" />
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <!-- <el-button type="primary" size="mini">借阅完成</el-button> -->
          <el-button
            type="primary"
            size="mini"
            @click="detail(scope.row)"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        :current-page.sync="page.pageNum"
        :page-sizes="[10, 20, 50]"
        :page-size="page.pageSize"
        layout="sizes, total, prev, pager, next"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog title="详情" :visible.sync="detailDialog" width="width">
      <el-form :model="selectRow" label-position="right" label-width="140px">
        <!-- <el-form-item label="档案交付单位">
  <span>{{ selectRow.delivUnit }}</span>
</el-form-item> -->
        <!-- <el-form-item label="档案分类">
  <span>{{ selectRow.archCateName }}</span>
</el-form-item> -->
        <el-form-item label="档案名称">
          <span>{{ selectRow.archTitle }}</span>
        </el-form-item>
        <el-form-item label="档案编号">
          <span>{{ selectRow.archMainCode }}</span>
        </el-form-item>
        <el-form-item v-show="selectRow.archDeptHotName" label="热点标签">
          <el-tag>{{ selectRow.archDeptHotName }}</el-tag>
        </el-form-item>
        <el-form-item label="档案保管期(月)">
          <span>{{
            selectRow.archPeriod === 0 ? "永久" : selectRow.archPeriod
          }}</span>
        </el-form-item>
        <el-form-item v-show="selectRow.notes" label="备注">
          <span>{{ selectRow.notes }}</span>
        </el-form-item>
        <!-- <el-form-item label="档案规范其他需求">
<el-input v-model="addForm.archRequireOther"></el-input>
</el-form-item> -->
        <el-form-item label="档案附件">
          <div v-for="item in fileList" :key="item.archFilesId">
            <el-button
              v-show="selectRow.appState === 5"
              type="text"
              style="display: block"
              @click="downLoad(item)"
            >{{ item.fileName }}</el-button>
            <span v-show="selectRow.appState !== 5">
              {{ item.fileName }}
            </span>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="detailDialog = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import { updateCount, queryFilesById, qryArchMainById } from '@/api/archManage'
import { qryArchApplication } from '@/api/archApplication'
import { dateFormat } from '@/filters/index'
export default {
  data() {
    return {
      userInfo: {},
      isLoading: false,
      searchForm: {
        archDeptClassName: '',
        archMainCode: '',
        archTitle: '',
        delivUnit: '',
        archPeriod: '',
        archRequireOther: '',
        archState: '',
        auditors: '',
        accessState: '',
        notes: ''
      },
      detailDialog: false,
      listData: [],
      selectRow: {},
      fileList: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 10
      },
      stateOptions: [
        {
          value: '-1',
          label: '全部'
        },
        {
          value: 0,
          label: '申请中'
        },
        {
          value: 5,
          label: '申请通过'
        },
        {
          value: 10,
          label: '申请驳回'
        }
      ],
      archTitle: '',
      appState: '-1'
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.getData()
  },
  // filters: {
  //   appState: function(value) {
  //     if(value === 0){
  //       return "申请中"
  //     }
  //     if(value === 5){
  //       if()
  //       return "申请通过"
  //     }
  //     return value;
  //   }
  // },
  methods: {
    // 获取列表数据
    getData() {
      this.isLoading = true
      const { pageNum, pageSize } = this.page
      const param = {
        pageNum: pageNum,
        pageSize: pageSize,
        type: '2', // 员工查询借阅
        staffCode: this.userInfo.username
          ? this.userInfo.username
          : this.userInfo.staffCode,
        archTitle: this.archTitle,
        appState: this.appState
      }
      qryArchApplication(param)
        .then((res) => {
          if (res.code === '0') {
            this.listData = res.data.records
            this.page.total = parseInt(res.data.total)
          }
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    dateFormat(row, column) {
      const daterc = row[column.property]
      return dateFormat(daterc, 0)
    },

    detail(row) {
      this.isLoading = true
      // 更新浏览和借阅次数
      updateCount({ type: 1, archMainId: row.archMainId })
      this.selectRow = row
      qryArchMainById({ archMainId: row.archMainId })
        .then((res) => {
          if (res.code === '0') {
            this.selectRow = res.data
            this.selectRow.appState = row.appState
          }
        })
        .finally(() => {
          this.detailDialog = true
          this.isLoading = false
        })
      queryFilesById({ archMainCode: row.archMainCode, recid: row.recid })
        .then((res) => {
          if (res.code === '0') {
            this.fileList = res.data
          }
        })
        .finally(() => {
          this.detailDialog = true
          this.isLoading = false
        })
    },

    downLoad(item) {
      this.$notify.info({
        title: '提示',
        message: '文件正在加密下载中，请稍等',
        duration: 1500
      })
      axios({
        method: 'post',
        url: '/prod-api/archMain/downLoadFile',
        responseType: 'blob',
        data: {
          fileUrl: item.fileURL,
          archFilesId: item.archFilesId
        }
      }).then((res) => {
        if (res.status === 200) {
          const fileName = item.fileName
          const link = document.createElement('a')
          link.href = window.URL.createObjectURL(res.data)
          link.download = fileName
          link.click()
          window.URL.revokeObjectURL(link.href)
          this.$notify({
            title: '提示',
            message: '下载完成',
            type: 'success'
          })
        } else {
          this.$notify.error({
            title: '',
            message: '下载异常'
          })
        }
      })
    },

    borrowStart() {
      this.$router.push('/myBriefcase/archBorrowStart')
    },

    handleSizeChange(val) {
      this.page.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getData()
    }
  }
}
</script>

<style scoped>
.home {
  margin: 20px;
}

.pagination {
  width: auto;
  display: flex;
  margin-top: 10px;
  align-items: center;
}

.search-input {
  width: 200px;
}
.danger {
  color: #f56c6c;
}
.primary {
  color: #409eff;
}
.success {
  color: #67c23a;
}
.warning {
  color: #e6a23c;
}
.info {
  color: #909399;
}
div /deep/ .el-dialog {
  margin-top: 40px !important;
  border-radius: 8px;
}
div /deep/ .el-dialog__body {
  padding: 0 25px;
}
</style>
